<template>
  <div class="block text-center">
    <el-carousel height="700px" motion-blur>
      <el-carousel-item v-for="(item, index) in images" :key="index">
        <img
          :src="item"
          alt="轮播图"
          style="width: 100%; height: 100%; object-fit: cover"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
const images = [
  "https://pic1.zhimg.com/v2-399e0bcdaada076bf0e55354105a9999_r.jpg?source=172ae18b",
  "https://pic3.zhimg.com/v2-ff51a55442c81a03bd384193cfc3e76f_720w.jpg?source=172ae18b",
  "https://img.shetu66.com/2023/06/01/1685604672085875.jpg",
  "https://pic1.zhimg.com/v2-e38215dc16e1d9987460e47e87c94210_1440w.jpg?source=172ae18b",
  "https://img.shetu66.com/2023/05/17/1684292347154097.jpg"
];
</script>

<style scoped lang="scss">
.block {
  margin: 0 auto;
  max-width: 1200px; /* 根据需要调整轮播图宽度 */
}

.el-carousel {
  border-radius: 8px; /* 添加圆角效果 */
  overflow: hidden; /* 确保图片不超出边界 */
}
</style>
